<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        官方网站：
        <a href="https://router.vuejs.org/zh/api/#exact-active-class">
            https://router.vuejs.org/zh/api/#exact-active-class
        </a>

        <br>
        <!-- 跳转到/login,router-link默认渲染为一个a标签 -->
        <router-link to="/index">跳转到首页</router-link>
        <router-view name="header"></router-view>
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>

    </div>

    <template id="headerTemplate">
        <div>
            头
        </div>

    </template>

    <template id="leftTemplate">
        <div>
            左
        </div>
    </template>

    <template id="mainTemplate">
        <div>
            主
        </div>
    </template>

    <script>
        var headerTemplate = Vue.component('header',{
            template:"#headerTemplate",
        })

        var leftTemplate = Vue.component('left',{
            template: "#leftTemplate",
        })

        var mainTemplate = Vue.component('main',{
            template:"#mainTemplate"
        })


        /**
         * 1.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫VueRouter
         */

        var router = new VueRouter({
            //这个配置对象中的route表示：路由匹配规则
            routes:[
                {
                    path:'/index',
                    components:{
                        header:headerTemplate,
                        left:leftTemplate,
                        main:mainTemplate
                    },
                }
            ]
        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
            /**
             * 2.将路由规则对象注册到vm实例上
             */
            router:router
        })
    </script>
</body>
</html>